<template>
	<view :class="'flex text-center ' + customClass" style="width:230rpx">
		<view class="flex-sub">
			<button class="cu-btn cuIcon-move sm st-num-bt" :disabled="stNum <= min" @tap="stNumMinus"></button>
		</view>
		<view class="flex-sub">
			<input ref="num" type="number" :min="0" class="st-num text-center bg-gray radius" :value="num"
				@input="numChange" />
		</view>
		<view class="flex-sub">
			<!-- <button class="cu-btn cuIcon-add sm st-num-bt" :disabled="max >= 0 ? stNum >= max : false"
				@tap="stNumAdd"></button> -->
			<button class="cu-btn cuIcon-add sm st-num-bt" :disabled="max >= 0 ? stNum >= max : false"
				@tap="stNumAdd"></button>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {},
  watch:{
    stNum(val){
      this.num = val
    }
  },
  created() {
    this.num = this.stNum;
  },
  props: {
    max: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: 0,
    },
    stNum: {
      type: Number,
      default: 0,
    },
    customClass: {
      type: String,
      default: "",
    },
  },
  methods: {
    stNumMinus() {
      this.$emit("numChange", this.stNum - 1);
    },
    stNumAdd() {
      this.$emit("numChange", this.stNum + 1);
    },
    numChange(e) {
    //   let num = e.detail.value <= 0 ? 1 : e.detail.value;
      let num = e.detail.value;
    //   if (e.detail.value <= 0) {
        this.$nextTick(()=>{
        // this.$refs.num.focus()
          this.num = 0;
        })
    //   }
      this.$emit("numChange", num);
    },
  },
  mounted() {
    // this.stNumMinus = debounce(this.stNumMinus,200)
    // this.stNumAdd = debounce(this.stNumAdd,200)
    // this.numChange = debounce(this.numChange,200)
  },
};
</script>
<style>
.st-num {
  min-width: 100rpx;
  max-width: 120rpx;
  height: 50rpx;
}

.st-num-bt {
  line-height: 50rpx;
  overflow: hidden;
  font-size: 30rpx !important;
  height: 50rpx !important;
}
</style>
